<!DOCTYPE html>
<html lang="en" xml:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/custom.form.css">
    <style>
        /*.layui-table-main>.layui-table{*/
        /*    position:absolute;*/
        /*    animation:mymove 60s infinite linear;*/
        /*}*/
        @keyframes move
        {
            from {top:0px;}
            to {top:-1000px;}
        }

        /*数据表格鼠标移入停止滚动动画*/
        .layui-table-main>.layui-table:hover{
            animation-play-state:paused;
        }
    </style>
    <script src="/layui/layui.js"></script>
    <script src="/js/core.util.js"></script>
</head>
<body>
    <div id="table_parent">
        <table id="excel_table" style="overflow:hidden"></table>
    </div>

    <script th:inline="none">
        layui.use(['jquery','form','table', 'layer'], function(){
            var table = layui.table;
            var $ = layui.jquery;
            var move ="move 60s infinite linear";
            var click = function () {
                CoreUtil.sendAjax("/api/Storages",null,function (res) {
                    console.log(res)
                    table.render({
                        data: res.data,
                        elem: '#excel_table'
                        ,height: 'full-20'
                        ,page: false
                        ,limit: 300000
                        ,even: true
                        ,cols: [[ //表头
                            {field: 'itemModel', title: '车型', width:'10%',align:'center'}
                            ,{field: 'itemNum', title: '部品编号', width:'20%',align:'center'}
                            ,{field: 'snp', title: 'snp', width:'10%',align:'center'}
                            ,{field: 'boxNum', title: '箱数', width:'10%',align:'center'}
                            ,{field: 'inStorageNum', title: '在库数', width: '10%',align:'center'}
                            ,{field: 'safeInStorageNUm', title: '安全在库', width: '10%',align:'center'}
                            ,{field: 'inStorageState', title: '在库状态', width: '10%',align:'center'}
                            ,{field: 'keepArea', title: '保管区域', width: '10%',align:'center'}
                            ,{field: 'productionLine', title: '生产线', width: '10%',align:'center'}
                        ]],
                        done: function() {
                            if(res.data.length<1){
                                move = ""
                            }
                        }
                    });

                },"GET",false, false)
            };
            click()
            $(".layui-table-main .layui-table").css( {"position":"absolute","animation":move});
            var ref = setInterval(function(){
                click()
            },200000);

        });
    </script>
</body>

</html>

<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
<!--    <meta charset="utf-8">-->
<!--    <title>table模块快速使用</title>-->
<!--    <link rel="stylesheet" href="/layui/css/layui.css" media="all">-->
<!--</head>-->
<!--<body>-->

<!--<table id="demo" lay-filter="test"></table>-->

<!--<script src="/layui/layui.js"></script>-->
<!--<script th:inline="none">-->
<!--    layui.use('table', function(){-->
<!--        var table = layui.table;-->

<!--        //第一个实例-->
<!--        table.render({-->
<!--            elem: '#demo'-->
<!--            ,height: 312-->
<!--            ,url: '/demo/table/user/' //数据接口-->
<!--            ,page: true //开启分页-->
<!--            ,cols: [[ //表头-->
<!--                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}-->
<!--                ,{field: 'username', title: '用户名', width:80}-->
<!--                ,{field: 'sex', title: '性别', width:80, sort: true}-->
<!--                ,{field: 'city', title: '城市', width:80}-->
<!--                ,{field: 'sign', title: '签名', width: 177}-->
<!--                ,{field: 'experience', title: '积分', width: 80, sort: true}-->
<!--                ,{field: 'score', title: '评分', width: 80, sort: true}-->
<!--                ,{field: 'classify', title: '职业', width: 80}-->
<!--                ,{field: 'wealth', title: '财富', width: 135, sort: true}-->
<!--            ]]-->
<!--        });-->

<!--    });-->
<!--</script>-->
<!--</body>-->
<!--</html>-->